<template>
    <section class="msg-item">
      <div class="inner" v-for="(i,k) in listinfo" :key="k">
          <router-link :to="'/my/myindex/msgre/' + i.id">
              <div class="thumbs">
                  <span class="bage" v-if="i.num">{{i.num}}</span>
                  <img :src="i.img" alt="thumbs">
              </div>
              <div class="details">
                  <span class="name">{{i.name}}</span>
                  <p class="tips">{{i.msg}}</p>
              </div>
          </router-link>
      </div>
    </section>
</template>

<script>
export default {
  name: 'MsgItem',
    props: {
        listinfo: {
            type: Array,
            required: true
        }
    }
}
</script>

<style scoped lang="less">
  @import "../../style/style.less";
  .inner {
      border-bottom: 1px solid @border-color;
      padding: 10px 10px 12px 0;
      &:hover {
          background-color: #f5f5f5;
      }
    &:after {
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0;
    }
      .thumbs, .details {
          float: left;
      }
      .thumbs {
          width: 46px;
          height: 46px;
          line-height: 1;
          border-radius: 50%;
          margin: 0 30px;
          position: relative;
          .bage {
              background-color: @error-color;
              position: absolute;
              top: -5px;
              right: -8px;
              padding: 2px 5px;
              color: #fff;
              border-radius: 10px;
          }
          img {
              width: 100%;
              height: 100%;
              border-radius: 50%;
          }
      }
      .details {
          width: calc(~'100% - 106px');
          .name {
              color: @theme-color-dark;
          }
          .tips {
              color: #333;
          }
      }
  }
</style>
